<%@ page contentType="text/html;charset=UTF-8" trimDirectiveWhitespaces="true"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<%@ include file="/WEB-INF/views/include/constrant.jsp"%>
<!DOCTYPE html>
<html>
<head>
<%@ include file="/WEB-INF/views/wx/include/head.jsp" %>
<style>
/*水平盒子布局*/
.flexbox{
	 display: -webkit-box;
    display: -webkit-flex;
    display: flex;
}
/*垂直盒子布局*/
.flexbox_vertical{
	 display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-flex-flow: column;
    flex-flow: column;
}
/*盒子布局平均分布*/
.flex
{
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  flex: 1;
}
.tabrow{
	height: 40px;
	line-height: 40px;
	background-color: #fff;
	font-size: 14px;
	text-align: center;
}
.tabrow .colitem{
	
}
.tabrowaction{
	color:#00ADA9;
	border-bottom: 2px solid #00ADA9;
}
.hide{
	display: none;
}
.show{
	display: block;
}
.text_overflow{
	white-space:nowrap;
	text-overflow:ellipsis;
	overflow:hidden;
	-webkit-text-overflow:ellipsis;
	vertical-align: middle;
}
.addbtn{
	font-size: 14px !important;
	height: 30px !important;
	line-height: 30px !important;
}
/*已响应*/
.tab0_row{

} 
.tab0_row .tab0_row_item{
	margin-top:5px;
	min-height: 90px;
	background-color: #fff;
}
.tab0_row .tab0_row_item .row1{
	height: 40px;
	line-height: 40px;
	font-size: 14px;
	border-bottom: 1px solid #efefef;
}
.tab0_row .tab0_row_item .row1 .col1{
	padding-left: 5px;
}
.tab0_row .tab0_row_item .row1 .col3{
	width: 40px;
	height: 40px;
	line-height: 40px;
	padding-left: 10px;
}
.tab0_row .tab0_row_item .row1 .col4{
	text-align: center;
}
.tab0_row .tab0_row_item .row2{
	height: 50px;
	line-height: 50px;
}
.tab0_row .tab0_row_item .row3{
	border-top: 1px solid #efefef;
}
.tab0_row .tab0_row_item .row3 .row3_item{
	height: 40px;
	line-height: 40px;
	font-size: 14px;
	border-bottom: 1px dashed #efefef;
}
.tab0_row .tab0_row_item .row3 .row3_item:LAST-CHILD{
	border-bottom:none;
}
.tab0_row .tab0_row_item .row3 .row3_item_btnrow{
	height: 50px;
	line-height: 50px;
}
 .row3_item .col1{
	padding-left: 5px;
}
.row3_item .col3{
	width: 40px;
	height: 40px;
	line-height: 40px;
	padding-left: 10px;
}
.btn{
	width: 80px;
	height: 30px;
	line-height: 30px;
	text-align: center;
	margin-top: 10px;
	margin-right: 10px;
}
.btnlook{
	background-color: #00ADA9;
	color:#fff;
	font-size: 12px;
}
.btncancel{
	background-color: #d7d2d2;
	color:#636363;
	font-size: 12px;
}
.btnbook{
	background-color: #00ADA9;
	color:#fff;
	font-size: 12px;
	width: 80%;
	height: 30px;
	line-height: 30px;
	text-align: center;
	position: relative;
	top:10px;
	left:10%;
}
.rotate180{
	transform:rotate(180deg);
	-ms-transform:rotate(180deg); 	/* IE 9 */
	-moz-transform:rotate(180deg); 	/* Firefox */
	-webkit-transform:rotate(180deg); /* Safari 和 Chrome */
	-o-transform:rotate(180deg); 	/* Opera */
}

</style>
</head>
<body>
	<header class="mui-bar mui-bar-nav">
		<a href="${ctxWx}/pu/my" class="mui-icon mui-icon-left-nav mui-pull-left"></a>
		<a onclick="addwxxq()" class="mui-icon mui-pull-right addbtn">发布</a>
		<h1 class="mui-title">需求发布</h1>
	</header>
	<div class="mui-content">
		<div class="flexbox tabrow">
			<div data_value="0" onclick="tabchage(this)" class="flex colitem tabrowaction">已响应</div>
			<div data_value="1" onclick="tabchage(this)" class="flex colitem">未响应</div>
			<div data_value="2" onclick="tabchage(this)" class="flex colitem">历史记录</div>
		</div>
		<!-- 已响应 -->
		<div id="tab0" class="tab0_row">
			<!-- 列表 1-->
			<div class="tab0_row_item">
				<div class="row1 flexbox">
					<div class="flex col1 text_overflow">常州-上海3日定制包车</div>
					<div class="flex col1 text_overflow">2017-07-02 12:23:33</div>
					<div onclick="showlist(0)" class="col3 mui-icon mui-icon-pulldown"></div>
				</div>
				<div class="row2 flexbox">
					<div class="flex"></div>
					<div onclick="lookDetail()" class="btn btnlook">查看</div>
					<div class="btn btncancel">取消</div>
				</div>
				<!-- 已响应 预订列表-->
				<div id="layout0" class="layout_ext hide">
				
					<div class="row3">
						<div class="flexbox row3_item">
							<div class="flex col1 text_overflow">客运公司</div>
							<div class="flex col1 text_overflow">快鹿客运</div>
							<div onclick="showlist(0)" class="col3 mui-icon mui-icon-pulldown rotate180"></div>
						</div>
						<div class="flexbox row3_item">
							<div class="flex col1 text_overflow">总价</div>
							<div class="flex col1 text_overflow">3000</div>
							<div class="col3"></div>
						</div>
						<div class="flexbox row3_item">
							<div class="flex col1 text_overflow">车型备注</div>
							<div class="flex col1 text_overflow">33座2辆   45座1辆</div>
							<div class="col3"></div>
						</div>
						<div class="flexbox row3_item">
							<div class="flex col1 text_overflow">响应时间</div>
							<div class="flex col1 text_overflow">2017.2.17 6:00</div>
							<div class="col3"></div>
						</div>
						<div class="row3_item_btnrow">
							<div onclick="addwxxqpay()" class="btnbook">预订</div>
						</div>
					</div>
					
					<div class="row3">
						<div class="flexbox row3_item">
							<div class="flex col1 text_overflow">客运公司</div>
							<div class="flex col1 text_overflow">快鹿客运</div>
							<div class="col3"></div>
						</div>
						<div class="flexbox row3_item">
							<div class="flex col1 text_overflow">总价</div>
							<div class="flex col1 text_overflow">3000</div>
							<div class="col3"></div>
						</div>
						<div class="flexbox row3_item">
							<div class="flex col1 text_overflow">车型备注</div>
							<div class="flex col1 text_overflow">33座2辆   45座1辆</div>
							<div class="col3"></div>
						</div>
						<div class="flexbox row3_item">
							<div class="flex col1 text_overflow">响应时间</div>
							<div class="flex col1 text_overflow">2017.2.17 6:00</div>
							<div class="col3"></div>
						</div>
						<div class="row3_item_btnrow">
							<div class="btnbook">预订</div>
						</div>
					</div>
					
				</div>
				<!-- 已响应 预订列表-->
			</div>
			<!-- 列表1 -->
			
			<!-- 列表2 -->
			<div class="tab0_row_item">
				<div class="row1 flexbox">
					<div class="flex col1 text_overflow">常州-上海3日定制包车</div>
					<div class="flex col1 text_overflow">2017-07-02 12:23:33</div>
					<div onclick="showlist(1)" class="col3 mui-icon mui-icon-pulldown"></div>
				</div>
				<div class="row2 flexbox">
					<div class="flex"></div>
					<div class="btn btnlook">查看</div>
					<div class="btn btncancel">取消</div>
				</div>
				<!-- 已响应 预订列表-->
				<div id="layout1" class="layout_ext hide">
				
					<div class="row3">
						<div class="flexbox row3_item">
							<div class="flex col1 text_overflow">客运公司</div>
							<div class="flex col1 text_overflow">快鹿客运</div>
							<div onclick="showlist(1)" class="col3 mui-icon mui-icon-pulldown rotate180"></div>
						</div>
						<div class="flexbox row3_item">
							<div class="flex col1 text_overflow">总价</div>
							<div class="flex col1 text_overflow">3000</div>
							<div class="col3"></div>
						</div>
						<div class="flexbox row3_item">
							<div class="flex col1 text_overflow">车型备注</div>
							<div class="flex col1 text_overflow">33座2辆   45座1辆</div>
							<div class="col3"></div>
						</div>
						<div class="flexbox row3_item">
							<div class="flex col1 text_overflow">响应时间</div>
							<div class="flex col1 text_overflow">2017.2.17 6:00</div>
							<div class="col3"></div>
						</div>
						<div class="row3_item_btnrow">
							<div class="btnbook">预订</div>
						</div>
					</div>
					
					<div class="row3">
						<div class="flexbox row3_item">
							<div class="flex col1 text_overflow">客运公司</div>
							<div class="flex col1 text_overflow">快鹿客运</div>
							<div class="col3"></div>
						</div>
						<div class="flexbox row3_item">
							<div class="flex col1 text_overflow">总价</div>
							<div class="flex col1 text_overflow">3000</div>
							<div class="col3"></div>
						</div>
						<div class="flexbox row3_item">
							<div class="flex col1 text_overflow">车型备注</div>
							<div class="flex col1 text_overflow">33座2辆   45座1辆</div>
							<div class="col3"></div>
						</div>
						<div class="flexbox row3_item">
							<div class="flex col1 text_overflow">响应时间</div>
							<div class="flex col1 text_overflow">2017.2.17 6:00</div>
							<div class="col3"></div>
						</div>
						<div class="row3_item_btnrow">
							<div class="btnbook">预订</div>
						</div>
					</div>
					
				</div>
				<!-- 已响应 预订列表-->
			</div>
			<!-- 列表2 -->
		</div>
		<!-- 未响应-->
		<div id="tab1" class="tab0_row hide">
			<!-- 列表 1-->
			<div class="tab0_row_item">
				<div class="row1 flexbox">
					<div class="flex col1 text_overflow">常州-上海3日定制包车</div>
					<div class="flex col1 text_overflow">2017-07-02 12:23:33</div>
				</div>
				<div class="row2 flexbox">
					<div class="flex"></div>
					<div class="btn btnlook">查看</div>
					<div class="btn btncancel">取消</div>
				</div>
			</div>
			<!-- 列表1 -->
			
			<!-- 列表2 -->
			<div class="tab0_row_item">
				<div class="row1 flexbox">
					<div class="flex col1 text_overflow">常州-上海3日定制包车</div>
					<div class="flex col1 text_overflow">2017-07-02 12:23:33</div>
				</div>
				<div class="row2 flexbox">
					<div class="flex"></div>
					<div class="btn btnlook">查看</div>
					<div class="btn btncancel">取消</div>
				</div>
			</div>
			<!-- 列表2 -->
		</div>
		<!--历史记录 -->
		<div id="tab2" class="tab0_row hide">
			<!-- 列表 1-->
			<div class="tab0_row_item">
				<div class="row1 flexbox">
					<div class="flex col1 text_overflow">常州-上海3日定制包车</div>
					<div class="flex col1 text_overflow">2017-07-02 12:23:33</div>
					<div class="flex col4 text_overflow">已支付</div>
				</div>
				<div class="row2 flexbox">
					<div class="flex"></div>
					<div class="btn btnlook">查看</div>
				</div>
			</div>
			<!-- 列表1 -->
			
			<!-- 列表2 -->
			<div class="tab0_row_item">
				<div class="row1 flexbox">
					<div class="flex col1 text_overflow">常州-上海3日定制包车</div>
					<div class="flex col1 text_overflow">2017-07-02 12:23:33</div>
					<div class="flex col4 text_overflow">已取消</div>
				</div>
				<div class="row2 flexbox">
					<div class="flex"></div>
					<div class="btn btnlook">查看</div>
				</div>
			</div>
			<!-- 列表2 -->
		</div>
	</div>
	<%@ include file="/WEB-INF/views/wx/include/script.jsp"%>
	<script type="text/javascript">
		$(function(){
			
		});
		//选项卡切换
		function tabchage(t)
		{
			var index=$(t).attr("data_value");
			if(index==0)
			{
				//申请开票操作
				$("#tab0").show();
				$("#tab1").hide();
				$("#tab2").hide();
			}else if(index==1)
			{
				//开票记录
				$("#tab1").show();
				$("#tab0").hide();
				$("#tab2").hide();
			}else
			{
				//开票记录
				$("#tab2").show();
				$("#tab0").hide();
				$("#tab1").hide();
			}
			//样式切换
			$(".colitem").removeClass("tabrowaction");
			$(t).addClass("tabrowaction");
		}
		//已响应列表切换
		function showlist(_index)
		{
			$("#layout"+_index+"").toggle();
		}
		//查看定制包车信息
		function lookDetail()
		{
			window.location="${ctxWx}/pu/member/wxxqdetail";
		}
		//添加定制包车信息
		function addwxxq()
		{
			window.location="${ctxWx}/pu/member/addwxxq";
		}
		//添加定制包车预订
		function addwxxqpay()
		{
			window.location="${ctxWx}/pu/member/addwxxqpay";
		}
	</script>
</body>
</html>